<template>
 <div class="at-me">
   <post-message class="at-me-post-message" key="at-me-post-message"></post-message>
    <!-- 微博列表 -->
    <blog-list class="at-me-blog-list" :list="blogListData"></blog-list>
    <!-- 加载更多 -->
    <load-more v-if="isLoadMore" @click.native="getMoreBlog"></load-more>
 </div>
</template>
<script>
import PostMessage from 'components/common/PostMessage'
import BlogList from 'components/common/BlogList'
import LoadMore from 'components/common/LoadMore'

import { mapGetters } from 'vuex'

import {
  getAtMeBlog
} from 'api/atMe'

export default {
  name: 'atMe',
  components: {
    PostMessage,
    BlogList,
    LoadMore
  },
  data () {
    return {
      id: 0,
      index: 0,
      blogData: {},
      blogListData: []
    }
  },
  computed: {
    ...mapGetters(['getSubmitBlog']),
    // 是否显示加载更多
    isLoadMore () {
      console.log(this.blogData.count, this.blogListData.length)
      console.log(this.blogData.count > this.blogListData.length)

      if (this.blogListData) {
        return this.blogData.count > this.blogListData.length
      }
      return false
    }
  },
  methods: {
    /**
     * 初始化首页数据
     * @methods init
     */
    async init () {
      let result = await getAtMeBlog()
      // 是否是错误
      if (result.errno === 0) {
        // 博客信息
        this.blogData = result.data
        this.blogListData = result.data.blogs
      } else {
        alert(result.message)
      }
    },
    /**
     * 获取后续的博客数据
     * @methods getMoreBlog
     */
    async getMoreBlog  () {
      this.index++
      // 获取后续
      let result = await getAtMeBlog(this.index)
      // 是否获取到成功数据
      if (result.errno === 0) {
        this.blogListData.push(...result.data.blogs)
      } else {
        this.index--
        alert(result.message)
      }
    }
  },
  watch: {
    /**
     * 监听是否发布新blog
     */
    getSubmitBlog () {
      this.init()
    }
  },
  created () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.at-me{
  width: 60%;
  margin: 0 auto;
  .at-me-blog-list{
    margin-top: 40px;
  }
}
</style>
